<template>
    <div class="bujian">
        <ModalTitle title="部件指数"></ModalTitle>
        <div class="bujian-chart" ref="bujianChart"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import {ZongHeZhiFaYunXDB} from '@/api/zhangzi'
export default {
    components: {
        ModalTitle
    },

    data() {
        return {

        }
    },

    mounted() {
        this.bujianChartData()
    },

    methods: {
        bujianChartData() {
            // 部件指数
            ZongHeZhiFaYunXDB.partIndexAPI().then(res => {
                let count = []
                let name = []
                console.log(res,'部件指数');
                if(res.code == 200){
                    res.data.forEach(item => {
                        count.push(item.count)
                        name.push(item.name)
                    })
                    this.bujianChartFn(count,name)
                }
            })
        },

        bujianChartFn(count,name) {
            let bujianChart = echarts.init(this.$refs.bujianChart)
            let option = {
                grid: {
                    containLabel: true,
                    left: 10,
                    right: 20,
                    bottom: 10,
                    top: 40,
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14,
                        interval: 0,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                    },
                    data: name,
                    type: 'category',
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14,
                    },
                    axisTick: {
                        show: true,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,1)'
                        }
                    },
                    name: '得分',
                    color: '#fff',
                },
                series: [
                    {
                        data: count,
                        type: 'bar',
                        barMaxWidth: 'auto',
                        barWidth: 30,
                        itemStyle: {
                            color: '#FFC36D',
                        },
                        label: {
                            show: false,
                            // position: 'top',
                            // distance: 10,
                            // color: '#fff'
                        },
                    },
                    {
                        data: [500, 500, 500, 500, 500, 500, 500],
                        type: 'bar',
                        barMaxWidth: 'auto',
                        barWidth: 30,
                        barGap: '-100%',
                        zlevel: -1,
                        itemStyle: {
                            color: 'rgba(0, 0, 0, 0.2)',
                        },
                    },
                ],
            };

            bujianChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.bujian {
    width: 100%;
    height: 31.5rem;
    margin: 1.5rem 0;

    .bujian-chart {
        width: 100%;
        height: 25rem;
    }
}
</style>